<template>

    <el-container class="container">
        <div class="menu">
            <el-menu class="menu1" default-active="1-4-1" :collapse="isCollapse">
                <el-menu-item index="1" @click="drawer1 = true" style="margin-top: 80px;">
                    <i class="el-icon-date"></i>
                    <span slot="title">预约挂号</span>
                </el-menu-item>
                <el-menu-item index="2" @click="drawer2 = true">
                    <i class="el-icon-tickets"></i>
                    <span slot="title">诊疗记录</span>
                </el-menu-item>
                <el-menu-item index="3" @click="drawer3 = true">
                    <i class="el-icon-data-analysis"></i>
                    <span slot="title">病例查询</span>
                </el-menu-item>
                <el-menu-item index="4" @click="drawer4 = true">
                    <i class="el-icon-house"></i>
                    <span slot="title">我的宠物</span>
                </el-menu-item>
            </el-menu>
            <el-menu class="menu2" default-active="1-4-1" :collapse="isCollapse">
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-user"></i>
                        <span slot="title">用户</span>
                    </template>
                    <el-menu-item index="1-1" @click="login" v-if="!isLogin">登录</el-menu-item>
                    <el-menu-item index="1-2" @click="manage" v-if="roleGroup">查看后台</el-menu-item>
                    <el-menu-item index="1-2" @click="profile" v-if="isLogin">个人信息</el-menu-item>
                    <el-menu-item index="1-3" @click="logout" v-if="isLogin">退出</el-menu-item>
                    <el-menu-item index="1-4" >网站信息</el-menu-item>
                    <el-menu-item index="1-5" >联系我们</el-menu-item>
                </el-submenu>
            </el-menu>

        </div>

        <el-main>
            <el-card class="logoConfig">
                <el-row>
                    <el-col :span="6">
                        <img src="@/assets/logo/logo3.png" alt="logo" class="logo">
                    </el-col>
                    <el-col :span="18">
                        <span class="logoText">用专业守护健康，以爱心温暖陪伴——您的爱宠，我们视如家人。</span>
                    </el-col>
                </el-row>
            </el-card>
            <div class="mainConfig">
                <el-row :gutter="50" style="margin-bottom: 20px;">
                    <el-col :span="12">
                        <el-row :gutter="0">
                            <el-col :span="4">
                                <el-card style="height: 200px; width: 100%;margin: 0;padding: 0;right: 0px;">
                                    <el-button @click="drawer1 = true" type="primary"
                                    style="margin: 0px;margin-top: 35px;height: 100px; ">
                                        预约挂号
                                    </el-button>
                                </el-card>
                            </el-col>
                            <el-col :span="20">
                                <el-card class="box-card1 box-card"></el-card>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="12">
                        <el-row :gutter="0">
                            <el-col :span="4">
                                <el-card style="height: 200px; width: 100%;margin: 0;padding: 0;right: 0px;">
                                    <el-button @click="drawer2 = true" type="primary"
                                        style="margin: 0px;margin-top: 35px;height: 100px; ">
                                        诊疗记录
                                    </el-button>
                                </el-card>
                            </el-col>
                            <el-col :span="20">
                                <el-card class="box-card2 box-card"></el-card>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row :gutter="50">
                    <el-col :span="12">
                        <el-row :gutter="0">
                            <el-col :span="4">
                                <el-card style="height: 200px; width: 100%;margin: 0;padding: 0;right: 0px;">
                                    <el-button @click="drawer3 = true" type="primary"
                                    style="margin: 0px;margin-top: 35px;height: 100px; ">
                                        病例查询
                                    </el-button>
                                </el-card>
                            </el-col>
                            <el-col :span="20">
                                <el-card class="box-card3 box-card"></el-card>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="12">
                        <el-row :gutter="0">
                            <el-col :span="4">
                                <el-card style="height: 200px; width: 100%;margin: 0;padding: 0;right: 0px;">
                                    <el-button @click="drawer4 = true" type="primary"
                                    style="margin: 0px;margin-top: 35px;height: 100px; ">
                                        我的宠物
                                    </el-button>
                                </el-card>
                            </el-col>
                            <el-col :span="20">
                                <el-card class="box-card4 box-card"></el-card>
                            </el-col>
                        </el-row>

                    </el-col>
                </el-row>

            </div>

            <el-drawer title="预约挂号" :visible.sync="drawer1" direction="rtl" size='60%' :before-close="handleClose">
                <AppointmentItem />
            </el-drawer>
            <el-drawer title="诊疗记录" :visible.sync="drawer2" direction="rtl" size='60%' :before-close="handleClose">
                <FinanceItem />
            </el-drawer>
            <el-drawer title="病例查询" :visible.sync="drawer3" direction="rtl" size='60%' :before-close="handleClose">
                <RecordItem />
            </el-drawer>
            <el-drawer title="我的宠物" :visible.sync="drawer4" direction="rtl" size='60%' :before-close="handleClose">
                <PetItem />
            </el-drawer>
        </el-main>
    </el-container>
</template>

<script>
import AppointmentItem from './appointmentItem.vue';
import PetItem from './petItem.vue';
import RecordItem from './recordItem.vue';
import FinanceItem from './financeItem.vue';
import Cookies from "js-cookie";

export default {
    name: 'index',
    components: {
        AppointmentItem,
        PetItem,
        RecordItem,
        FinanceItem
    },
    data() {
        return {
            drawer1: false,
            drawer2: false,
            drawer3: false,
            drawer4: false,
            isCollapse: true,
            roleGroup: false,
            isLogin: false,
        }
    },
    created() {
        this.checkRole();
    },
    methods: {
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.drawer1 = false;
                    this.drawer2 = false;
                    this.drawer3 = false;
                    this.drawer4 = false;

                    done();
                })
                .catch(_ => {
                    done();
                });
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose1(key, keyPath) {
            console.log(key, keyPath);
        },
        getButtonStyle(index) {
            const radius = 60;
            const angle = (index * 90 + 45) * (Math.PI / 180);
            const x = Math.cos(angle) * radius;
            const y = Math.sin(angle) * radius;

            return {
                transform: `translate(${x}px, ${y}px)`,
                left: '50%',
                top: '50%',
                margin: '-25px'
            }
        },
        getContentStyle(index) {
            return {
                transform: `rotate(${-index * 90}deg)`
            }
        },
        handleClick(route) {
            this.$router.push(route)
        },
        
    logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
        Cookies.remove("petUserId");
        Cookies.remove("petRoleGroup");
          location.href = '/index'
        })
      }).catch(() => {})
    },
    login() {
        this.$router.push('/login')
    },
    profile() {
        this.$router.push('/frontProfile')
    },
    manage() {
        this.$router.push('/')
    },
    checkRole() {
        const loginstatus = Cookies.get("petUserId");
        const roleGroup1 = Cookies.get("petRoleGroup");
        if (loginstatus)
          this.isLogin = true;
        if (roleGroup1 == "超级管理员")
          this.roleGroup = true;
      }
    
    }
}


</script>

<style scoped lang="scss">
.container {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;

}

.aside {
    height: 100%;
    width: 100px;
    background-color: #2872e0;
}

.menu {
    width: 60px;
    height: 100%;
}

.menu1 {
    width: 100%;
    height: 90%;

}

.menu2 {


    width: 100%;
    height: 10%;
}

.logo {
    height: 240px;
}

.logoConfig {
    width: 100%;
    height: 35%;
    margin-bottom: 30px;
}

.logoText {
    font-size: 30px;
    /* 字体颜色使用渐变色，蓝色到绿色 */
    background: linear-gradient(to right, #0000FF, #00ff00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* color: #333; */
    line-height: 250px;
    margin: auto;
    font-weight: bold;
    font-family: 'Microsoft YaHei', sans-serif;
    font-style: italic;
    font-weight: 600;
}

.mainConfig {
    position: relative;
    width: 90%;
    height: 60%;
    margin: auto;


}

.box-card1 {
    background: url('../../../assets/images/appointment.png');
}


.box-card2 {
    background: url('../../../assets/images/financeItem.png');
}

.box-card3 {
    background: url('../../../assets/images/recordItem.png');
}

.box-card4 {
    background: url('../../../assets/images/petItem.png');
}

.box-card {
    height: 200px;
    width: 100%;
    margin: auto;
    padding: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
</style>
